<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div>
    <el-button type="primary" size="default" @click="drawer = true">
      新增账号
    </el-button>

    <el-table :data="userList" border stripe>
      <el-table-column prop="username" label="账号名称" width="150" />
      <el-table-column prop="roleName" label="账号角色" width="150" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleAddEdit(scope.row)"
            >编辑</el-button
          >

          <el-button type="danger" size="small" @click="">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer title="账号管理" v-model="drawer" direction="rtl" size="30%">
      <UserForm />
    </el-drawer>
  </div>
</template>

<script>
import { roleGet, roleDel, userGet } from "@/api/user-api";
import UserForm from "./components/user-form.vue";
export default {
  components: {
    UserForm,
  },
  data() {
    return {
      userList: [],
      drawer: false,
    };
  },
  created() {
    userGet().then((res) => {
      this.userList = res.data.results;
    });
  },
};
</script>

<style lang="scss" scoped></style>
